<template>
    <TransitionGroup
        tag="ul"
        :class="[
            'zx-upload-list',
            'zx-upload-list--' + listType,
            { 'is-disabled': disabled }
        ]"
        name="zx-list"
    >
        <li
            v-for="file in files"
            :key="file.uid"
            :class="['zx-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
            tabindex="0"
            @keydown.delete="!disabled && $emit('remove', file)"
            @focus="focusing = true"
            @blur="focusing = false"
            @click="focusing = false"
        >
            <slot :file="file">
                <img
                    v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
                    class="zx-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                >
                <a class="zx-upload-list__item-name" @click="handleClick(file)">
                    <i class="zx-icon-document" />{{ file.name }}
                </a>
                <label class="zx-upload-list__item-status-label">
                    <i
                        :class="{
                            'zx-icon-upload-success': true,
                            'zx-icon-circle-check': listType === 'text',
                            'zx-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
                        }"
                    />
                </label>
                <i v-if="!disabled" class="zx-icon-close" @click="$emit('remove', file)" />
                <i v-if="!disabled" class="zx-icon-close-tip">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
                <ZxProgress
                    v-if="file.status === 'uploading'"
                    :type="listType === 'picture-card' ? 'circle' : 'line'"
                    :stroke-width="listType === 'picture-card' ? 6 : 2"
                    :percentage="parsePercentage(file.percentage)"
                />
                <span v-if="listType === 'picture-card'" class="zx-upload-list__item-actions">
                    <span
                        v-if="handlePreview && listType === 'picture-card'"
                        class="zx-upload-list__item-preview"
                        @click="handlePreview(file)"
                    >
                        <i class="zx-icon-zoom-in" />
                    </span>
                    <span
                        v-if="!disabled"
                        class="zx-upload-list__item-delete"
                        @click="$emit('remove', file)"
                    >
                        <i class="zx-icon-delete" />
                    </span>
                </span>
            </slot>
        </li>
    </TransitionGroup>
</template>
<script>
import Locale from '@src/mixins/locale';
import ZxProgress from '../../../components/progress';

export default {

    name: 'ZxUploadList',
    components: { ZxProgress },

    mixins: [Locale],

    props: {
        files: {
            type: Array,
            default() {
                return [];
            },
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        handlePreview: Function,
        listType: String,
    },

    data() {
        return {
            focusing: false,
        };
    },
    methods: {
        parsePercentage(val) {
            return parseInt(val, 10);
        },
        handleClick(file) {
            this.handlePreview && this.handlePreview(file);
        },
    },
};
</script>
